<template>
	<div class="listren">
		<div class="query">
			<div>
				<el-form :inline="true" :model="formInline" class="demo-form-inline swquery">

					<el-form-item label="公司名称" class='swfrom'>
						<el-input v-model="formInline.name" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="联系人" class='swfrom'>
						<el-input v-model="formInline.lxr" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="手机号" class='swfrom'>
						<el-input v-model="formInline.tel" size="mini" @blur='telyanzheng'></el-input>
					</el-form-item>
					<el-form-item label="录入时间" class='swfrom'>
						<el-input v-model="formInline.lrsj" size="mini"></el-input>
					</el-form-item>
					
					<el-form-item>
						<el-button type="success" @click="onSubmit" size="mini">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<el-table :data="tableData3" border height='100%' style="height: 100%;">
			<el-table-column prop="date" label="公司名称" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="所属行业" align='center'>
			</el-table-column>
			<el-table-column prop="address" label="公司性质" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="地址" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="联系人" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="手机号码" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="详情" align='center'>
				<template slot-scope="scope">
					<router-link v-bind="{to:'qiyeDetail/'+scope.row.id}">					
						<el-button type="primary" size='mini' >查看</el-button>
					</router-link>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="登记人" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="登记时间" align='center'>
			</el-table-column>
			<el-table-column prop="name" label="操作" align='center'>
			</el-table-column>
		</el-table>
		<div class="pageM">
			<div class="block">
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  :page-sizes="[20, 40, 60, 80]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			return {
				formInline: {
					name:'',
					lxr: '',
					tel:'',
					lrsj: ''
				},

				tableData3: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市',
					id: '123'
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市'
				}],
				

			}
		},
		created() {

		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			lookR(row) {
				let rob = row;

				this.$emit('lookddd', rob);
			},
			onSubmit() {
				console.log(this.formInline);
			},
			telyanzheng(e) {			
				//				去除手机号空格
				let tel = e.srcElement.value.trim();
				let reg = /^1[3|4|5|8][0-9]\d{4,8}$/
				if(!reg.test(tel)) {
					this.$notify.error({
						title: '错误',
						message: '你输入的手机号不合法'
					});
				}

			},
		},
		mounted() {
			var inputlist = document.querySelectorAll(".el-input");
			for(var i = 0; i < inputlist.length; i++) {
				inputlist[i].style.width = "110px";
			}
		}
	}
</script>
<style lang="scss" scoped>
	.listren {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 40px;
		.query {
			position: absolute;
			z-index: 9;
			width: 100%;
			height: 40px;
			top: -42px;
			/*background-color: pink;*/
			.swquery {
				display: flex;
				justify-content: space-between;
				min-width: 896px;
			}
			.el-form-item__content {
				width: 50px;
				height: 40px;
			}
		}
		.pageM {
			position: absolute;
			right: 0;
			bottom: -36px;
		}
	}
</style>